<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="datepicker/skin/WdatePicker.css">
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			html,body{height:100%;}
			#template{display: none;}
			#mask{
				position:fixed;
				background-color:rgba(0,0,0,.5);
				width: 100%;
				height:100%;
				top:0;
				left:0;
				display: none; 
			}
			#popup p{
				line-height:42px;
			}
			#popup{
				width:950px;
				height:700px;
				padding:30px;
				background-color:#fff;
				border-radius:20px;
				position:fixed;
				top:50%;
				z-index:1;
				left:50%;
				transform:translate(-50%,-50%);
				display: none;
			}
			#chart{
				width:950px;
				height:700px;
			}
			#close{
				position:absolute;
				top:5px;
				right:15px;
				color:#999;
				font-size: 24px;
				cursor:pointer;
				transition:all .5s;
			}
			#close:hover{
				transform: rotate(90deg);
			}
			.nav li{
				float:left;
				list-style:none;
			}
			#table-chart{
				height:600px;
				display: none;
			}
		</style>
	</head>
	<body>
	<div style="margin:20px;">
		<h3>用户：<span id="username"></span><a href="/login.html"  id="outlogin">[退出登录]</a></h3>
		<ul class="nav">

			<li><a href="/index.html">学生管理</a></li>
			<li><a href="/score.html">成绩管理</a></li>
		</ul>

		<div class="form-inline">
			<div class="form-group">
				<select class="form-control subject">
					<option>全部科目</option>
				</select>
			</div>
			<div class="form-group">
				<input type="text" class="form-control" id="name" placeholder="学生姓名">
			</div>
			<div class="form-group">
				<input type="text" class="form-control" id="date" placeholder="日期">
			</div>
			<button class="btn btn-primary" id="query">查询</button>
		</div>




		<div style="float:right;margin-right:15px;margin-top: 15px;">
			<button class="btn btn-primary" id="popupshow">+添加成绩记录</button>
		</div>
		<div id="table-chart"></div>
		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>学号</th>
					<th>姓名</th>
					<th>学科</th>
					<th>分数</th>
					<th>考试日期</th>
					<th>操作</th>
				</tr>
				<tr id="template">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<button class="btn btn-primary edit">修改信息</button>
						<button class="btn btn-danger details">查看该学员详细成绩</button>
					</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

		
		
		<div id="popup">
			<div id="chart">
			</div>
			<span id="close"> × </span>
		</div>
		<div id="mask">
		</div>
		<script src="citys.js"></script>
		<script src="common.js"></script>
		<script src="echarts.min.js"></script>
		<script src="jquery.min.js"></script>
		<script src="datepicker/WdatePicker.js"></script>
		<script>

			// 检测用户是否登录
			let username = sessionStorage.getItem("username");
			// 如果没有登录数据，就拜拜
			if(!username){
				location.href = `${url}/login.html`
			}
			$("#username").html(username)

			// 退出登录
			$("#outlogin").click(()=>{
				sessionStorage.clear();
			})

			$("#close").click(function(){
				$("#mask").fadeOut();
				$("#popup").fadeOut();
			})

			$.ajax({
				url:`${url}/getScore`,
				success(data){
					var data = JSON.parse(data);


					// 生成删选科目按钮
					for(let item of new Set(data.map(item => item.subject))){
						$(".subject").append($(`<option>${item}</option>`))
					}


					data.forEach(item=>{
						let newItem = $("#template").clone(true);
						newItem.appendTo($(".table tbody")).attr("id","")
						newItem.find("td").eq(0).html(item.scoreId)
						newItem.find("td").eq(1).html(item.id)
						newItem.find("td").eq(2).html(item.name)
						newItem.find("td").eq(3).html(item.subject)
						newItem.find("td").eq(4).html(item.score)
						newItem.find("td").eq(5).html(item.date)
					})

					$(".details").click(function(){

						$.ajax({
							url:`${url}/getScore`,
							data:{
								id:$(this).closest("tr").find("td").eq(1).html()
							},
							success(data){
								$("#mask").fadeIn()
								$("#popup").fadeIn()
						        var myChart = echarts.init($("#popup #chart")[0]);

						        var data = JSON.parse(data);

						       


						        myChart.setOption({
    								tooltip: {},
								    title: {
								        text: `${data[0].name} 在 ${data[0].date}考试中各科的详细成绩`
								    },
								    xAxis: {
								        type: 'category',
								        data: data.map(item=>item.subject)
								    },
								    yAxis: {
								        type: 'value'
								    },
								    series: [{
								        data: data.map(item=>item.score),
								        type: 'bar'
								    }]
								});
							}
						})
					})
				}
			})
			window.onkeydown = function(event){
				if(event.keyCode === 13){
					$("#query").click()
				}
			}
			$("#query").click(function(){
				let name = $("#name").val();
				let date = $("#date").val();
				if(!name && !date){
					$("#table-chart").hide();
					$("table").fadeIn();

					$.ajax({
						url:`${url}/getScore`,
						data:{
						},
						success(data){
							var data = JSON.parse(data);
							$("tbody").empty();
							data.forEach(item=>{
								let newItem = $("#template").clone(true);
								newItem.appendTo($(".table tbody")).attr("id","")
								newItem.find("td").eq(0).html(item.scoreId)
								newItem.find("td").eq(1).html(item.id)
								newItem.find("td").eq(2).html(item.name)
								newItem.find("td").eq(3).html(item.subject)
								newItem.find("td").eq(4).html(item.score)
								newItem.find("td").eq(5).html(item.date)
							})
						}
					})
				}
				if(name && !date){
					$.ajax({
						url:`${url}/getScore`,
						data:{
							name,
							// 等价于
							// name:name
						},
						success(data){
							var data = JSON.parse(data);
							$("tbody").empty();
							data.forEach(item=>{
								let newItem = $("#template").clone(true);
								newItem.appendTo($(".table tbody")).attr("id","")
								newItem.find("td").eq(0).html(item.scoreId)
								newItem.find("td").eq(1).html(item.id)
								newItem.find("td").eq(2).html(item.name)
								newItem.find("td").eq(3).html(item.subject)
								newItem.find("td").eq(4).html(item.score)
								newItem.find("td").eq(5).html(item.date)
							})
						}
					})
				}
				if(name && date){

					$.ajax({
						url:`${url}/getScore`,
						data:{
							name,
							date
						},
						success(data){
							$("table").hide();
							var myChart = echarts.init($("#table-chart").fadeIn()[0]);
					        var data = JSON.parse(data);
					        myChart.setOption({
								tooltip: {},
							    title: {
							        text: `${data[0].name} 在 ${data[0].date}考试中各科的详细成绩`
							    },
							    xAxis: {
							        type: 'category',
							        data: data.map(item=>item.subject)
							    },
							    yAxis: {
							        type: 'value'
							    },
							    series: [{
							        data: data.map(item=>item.score),
							        type: 'bar'
							    }]
							});
						}
					})
				}
			})

			$("#date").click(function(){
				WdatePicker({
					el:this,
					dateFmt:'yyyy/MM/dd'
				})
			})
		</script>
	</div>
	</body>
</html>
